<?php /*a:7:{s:95:"C:\xampp64-php5\htdocs\tp5\application\index\view\index\question_bank\user_travel_map_ques.html";i:1589271330;s:61:"C:\xampp64-php5\htdocs\tp5\application\index\view\layout.html";i:1589270040;s:68:"C:\xampp64-php5\htdocs\tp5\application\index\view\public\header.html";i:1589790292;s:96:"C:\xampp64-php5\htdocs\tp5\application\index\view\index\question_bank\canvas_structure_ques.html";i:1589790292;s:95:"C:\xampp64-php5\htdocs\tp5\application\index\view\index\question_bank\canvas_template_ques.html";i:1587898568;s:67:"C:\xampp64-php5\htdocs\tp5\application\index\view\public\float.html";i:1587261223;s:68:"C:\xampp64-php5\htdocs\tp5\application\index\view\public\footer.html";i:1589016654;}*/ ?>
<div>
    <div class="my_container">
        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/homePage.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/tooltip.css" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui@2.12.0/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>


</head>

<body>
    <div class="top">
        <div class="name">
            <a style="text-decoration: none;" href="<?php echo url('index/getHomePage'); ?>">
                <img src="http://localhost/tp5/public/img/header/logo.png" style="width:8em">
                <!--火花设计思维分享-->
            </a>
        </div>
        <?php if(!isset($_COOKIE['user'])): ?>
        <div class="login" style="margin-left: 50%;"><a href="<?php echo url('index/login'); ?>" style="font-size: 20px;">登录</a></div>
        <div class="register"><a href="<?php echo url('index/register'); ?>" style="font-size: 20px;">注册</a></div>

        <?php else: ?>

        <!--添加成员的消息通知-->
        <div onclick="window.location.href='<?php echo url('index/showPrjMemRequests'); ?>'" class="request_banner" style="display: none;"></div>


        <div class="login"><a id="header_projects" href="<?php echo url('index/getProjects',array('userId'=>$_COOKIE['user'])); ?>" style="font-size: 20px;">项目小组</a></div>


        <div class="register"><a id="header_methods" href="<?php echo url('index/getDesignMethods'); ?>" style="font-size: 20px;">设计方法</a></div>
        <div class="register"><a id="header_cases" href="<?php echo url('index/getPublicCanvasLists'); ?>" style="font-size: 20px;">创意社区</a></div>
        <div class="register"><a id="header_ques" href="<?php echo url('index/getSingleQuesBank'); ?>" style="font-size: 20px;">题库练习</a></div>


        <div class="welcome_banner" style="z-index:105;" onmouseover="$('#logout').show()" onmouseout="$('#logout').hide()">
            <svg style="margin-left:65px;" t="1573030732563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2246" width="40" height="40">
                <path d="M512 950.857143c241.371429 0 438.857143-197.485714 438.857143-438.857143s-197.485714-438.857143-438.857143-438.857143-438.857143 197.485714-438.857143 438.857143 197.485714 438.857143 438.857143 438.857143z m0 73.142857c-285.257143 0-512-226.742857-512-512s226.742857-512 512-512 512 226.742857 512 512-226.742857 512-512 512z" fill="#e45440" p-id="2247">

                </path>
                <text x="50%" y="65%" style="fill:#e45440;font-size:550px;text-anchor: middle;">
                    <?php echo iconv_substr($_COOKIE['username'],0,1); ?>
                </text>
            </svg>


            <div id="logout">
                <div class="logout_top">
                    <text class="logout_user"><?php echo htmlentities($_COOKIE['username']); ?></text>
                    <br>
                    <text class="logout_id">ID: <?php echo htmlentities($_COOKIE['user']); ?></text>
                </div>

                <div class="logout_option">
                    <a href="<?php echo url('index/showPrjMemRequests'); ?>">我的消息</a>
                </div>

                <div class="logout_option">
                    <a href="<?php echo url('index/logout'); ?>">登出</a>
                </div>

                <div style="height: 6px;width: 100%;border-radius: 4px;"></div>
            </div>

            <svg style="float: right;margin-right: 30px;" t="1573118997341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" width="15" height="40"><path d="M972.838375 233.161725c15.319322 15.477939 27.804007 28.100774 43.005646 43.46103-167.688762 171.229501-334.75329 341.814301-503.593304 514.220637C343.610253 619.265957 176.069875 448.809074 8.155979 277.978674c15.140239-13.528486 28.904092-25.828971 36.456303-32.582981C102.486983 299.970139 164.429441 355.920971 223.562844 414.706441c90.002299 89.475281 178.423545 180.552081 266.599191 271.833548 16.09194 16.659891 25.511737 17.96976 42.483746 0.450267 139.874522-144.366961 280.757028-287.756638 421.235317-431.540299C960.33834 248.844331 965.900165 241.36887 972.838375 233.161725z" p-id="2176"></path></svg>

        </div>
        <?php endif; ?>
    </div>
    <!--
<?php if(!isset($_COOKIE['user'])): ?>
<a href="<?php echo url('index/login'); ?>">登录</a>
<?php else: ?><a href="<?php echo url('index/logout'); ?>">登出</a>
<a href="<?php echo url('index/getProjects',array('userId'=>$_COOKIE['user'])); ?>">项目</a>
<?php endif; ?>-->

    <script>
        $.ajax({
            type: "GET",
            url: "http://localhost/tp5/public/index.php/index/index/getPrjMemRequests",
            data: {},
            xhrFields: {
                withCredentials: true
            },
            //crossDomain: true,
            success: function(result) {
                if (result != null && (result.request_list.length > 0 || result.reject_list.length > 0)) {
                    $(".request_banner").show();
                    $(".request_banner").html("<a style='cursor: pointer;'>-您有" + (result.request_list.length + result.reject_list.length) + "条消息-</a>");
                }
            }
        });

        /*$.get('http://localhost/tp5/public/index.php/index/index/getPrjMemRequests',{},function (result) {
            if(result != null && ( result.request_list.length > 0 || result.reject_list.length > 0) ) {
                $(".request_banner").show();
                $(".request_banner").html("<a>-您有" + ( result.request_list.length + result.reject_list.length ) + "条消息-</a>");
            }
            //$(".request_banner").load(location.href + " .request_banner");
        });*/
    </script>
</body>

</html> <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/gonggantu.css" />

<link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/bootcssButtons.css" />
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css">-->
<div id="work_top_window" style="z-index:101;position:absolute;width:100%;height:70px;background-color: #f9f9f9;border-bottom: 1px solid rgba(94, 94, 94, 0.767);">
    <!--项目名称part-->
    <div style="float: left;">
        <div style="font-size: 18px;margin-left: 20px;">
            <div class="return_btn" onclick="location.href='<?php echo url('index/getSingleQuesBank'); ?>'" style="cursor: pointer; float:left;margin:3px 15px 0 0;background-image:linear-gradient(#ffffff,#eeeeee);padding:0 15px;">
                <img style="width:24px;height: 24px;" src="http://localhost/tp5/public/img/return.png">
            </div>
            <span style="color: #838282;">返回题库</span>
        </div>
    </div>

    <!--自动保存提示语句part-->
    <div id="auto_save" style="position: absolute;top:5px;right:60px;color: #838282;font-weight: 300;">
        [修改将自动保存]
    </div>



    <!-- <div style="height: 75px;text-align: center;padding: 30px 0;font-size: 22px;"> -->
    <div style="position: absolute;font-size: 22px;padding-top: 20px;height: 75px;text-align: center;width: 100%;font-weight: 350;">
        <span>&nbsp;<?php echo htmlentities($ques_info['ques_type']); ?>&nbsp;|&nbsp;<?php echo htmlentities($ques_info['content']); ?></span>
    </div>
    <!-- </div> -->



</div>

<div id="ques_explanation" style="margin-top:100px;font-size: 17px;padding: 0 300px;">
    <?php echo $ques_info['explanation']; ?>
</div>


<div id="answer_window_vue" style="float: right;margin-right: 350px;">
    <span @click="showAnswer" style="cursor: pointer;">
        <!--红色感叹号图标-->
        <!--<svg t="1587690063179" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1150" width="24" height="24"><path d="M512 128c212 0 384 172 384 384S724 896 512 896 128 724 128 512s172-384 384-384m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z" p-id="1151" fill="#d81e06"></path><path d="M480 704h64v64h-64z m0-448h64v384h-64z" p-id="1152" fill="#d81e06"></path></svg>
        -->
        <span style="
    padding: 0 20px;
    border: 1px solid #409eff;
    border-radius: 30px;
    color: #409eff;
    background-color: white;
    font-weight: bold;
        ">点此查看解析</span>
    </span>


    <div id="answer_window" v-show="isShowAnswer" style="display:none;position: absolute;right: 200px;z-index: 110;background-color:white;width:260px;min-height:55px;box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);">
        <div style="padding: 10px 10px;background: linear-gradient(0deg, #fafafa, #f8f8f8);box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);">解析
            <span @click="closeAnswer" style="float:right;cursor: pointer;font-size: 12px;color: #a2a2a2;">×关闭解析</span>
        </div>

        <div style="max-height:250px;overflow:auto;">
            <!--点击查看解析按钮后ajax查询，显示在此区域-->
            <div v-if="isShowAnswerContent" style="font-size: 20px;margin: 10px; ">
                {{showAnswerContent}}
            </div>
        </div>

        <div style="background: #cccccc;height: 1px;margin: 5px 10px;"></div>

        <div id="self_rating" style="padding: 10px 10px;">
            <el-form ref="form" :model="form">
                <el-form-item label="自评分数">
                    <el-rate v-model="form.ratings" show-text style="padding: 10px;">
                    </el-rate>
                </el-form-item>
                <el-form-item label="自我感悟">
                    <el-input type="textarea" autosize placeholder="请输入感悟或评价" v-model="form.comments">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交自评</el-button>
                    <!--<el-button>取消</el-button>-->
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>


<script>
    $('#header_ques').css('border-bottom', 'solid 2px #000000');
    $('#header_ques').css('font-weight', 'bold');

    setTimeout(function() {
        var record_flags = JSON.parse('<?php echo json_encode($record_flags); ?>');
        record_flags.forEach(function(item) {
            var preparedId = item.prepared_id;
            // console.log(preparedId)
            $('#flag_importance_' + preparedId).show();
        });
    }, 500);
</script>

<script type="module">
    var vm = new Vue({ el: '#answer_window_vue', data(){ return { /*RatingOptions: [{ value: '0', label: '0' }, { value: '20', label: '20' }, { value: '40', label: '40' }, { value: '60', label: '60' }, { value: '80', label: '80' },{ value: '100', label: '100'
    }],*/ form: { ratings: null, comments: '' }, isShowAnswer: false, isShowAnswerContent: false, showAnswerContent: '' } }, methods: { closeAnswer(){ this.isShowAnswer = false; }, showAnswer(){ var axiosAjax = axios.create({ baseURL: 'http://localhost/tp5/public/index.php/index/',
    transformRequest: [function(data) { data = Qs.stringify(data); return data; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); var params = { quesId: '<?php echo htmlentities($ques_info["id"]); ?>', userId: '<?php echo htmlentities($_COOKIE["user"]); ?>', }; axiosAjax.post('Quescontroller/hasAnsweredQues',
    params).then(res => { console.log(res) if((res.data).has == false){ this.$message.error('请作答完毕后再查看解析~'); return; } params = { quesId: '<?php echo htmlentities($ques_info["id"]); ?>' }; axiosAjax.post('Quescontroller/getQuesAnswer', params).then(response => { console.log(response);
    this.showAnswerContent = response.data; params = { quesId: '<?php echo htmlentities($ques_info["id"]); ?>', userId: '<?php echo htmlentities($_COOKIE["user"]); ?>', }; axiosAjax.post('Quescontroller/getQuesSelfAssessment', params).then(res => { console.log(res) if(res.data != null) { this.form.ratings
    = res.data.ratings; this.form.comments = res.data.comments; } this.isShowAnswerContent = true; this.isShowAnswer = true; }); }).catch(function(error) { console.log(error); }); }); }, onSubmit(){ if(/^[ ]+$/.test(this.form.comments) || this.form.comments
    == "" || this.form.comments == null || this.form.ratings == 0){ this.$message.error('请输入评分及自我感悟'); return; } var axiosAjax = axios.create({ baseURL: 'http://localhost/tp5/public/index.php/index/', transformRequest: [function(data) { data = Qs.stringify(data); return data; }],
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); var params = { quesId: '<?php echo htmlentities($ques_info["id"]); ?>', userId: '<?php echo htmlentities($_COOKIE["user"]); ?>', ratings: this.form.ratings, comments: this.form.comments }; axiosAjax.post('Quescontroller/updateQuesSelfAssessment',
    params).then(response => { console.log(response); this.$message.success('自评已成功提交~'); // this.form.ratings = response.data.ratings; //this.form.comments = response.data.comments; }).catch(function(error) { console.log(error); }); } } })

</script>




<div style="margin-top:10px;width: 100%;text-align: center;font-size: 30px;">
    <div style="width: 200px;position: relative;margin-left: 45%;">
        用户体验地图

        <div class="tooltip" style="width: 24px;height: 24px;position: absolute;top: 0%;left: 100%;">

            <img style="width: 24px;height: 24px;position: absolute;top: 0%;left: 0%;" src="http://localhost/tp5/public/img/explaination.png">

            <span class="tooltiptext" style="text-align:left;font-size: 14px;">
                用户体验地图用一种讲故事的方式，从一个特定用户的视角出发，记录用户完成目标离开的全部过程，包括：用户在这个场景中的触点、行为、想法感受、情绪变化以及痛点等。
            </span>
        </div>

    </div>
</div>



<!--具体条目分块-->
<table class="ques_table" style="">
    <?php if(is_array($types) || $types instanceof \think\Collection || $types instanceof \think\Paginator): $i = 0; $__LIST__ = $types;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$t): $mod = ($i % 2 );++$i;?>
    <tr>
        <td style="">
            <?php echo htmlentities($t['type_name']); if($t['type_name'] == '情感波动'): ?>
            <br><br>
            <i style="text-align: left">(情绪等级:<br>正数代表振奋、高涨等，<br>负数代表忧虑、低落等，<br>数值越高情绪越正面)</i>
            <?php endif; ?>
        </td>
        <?php if($t['type_name'] == '情感波动'): ?>
        <td colspan="4">
          <div id="echarts" style="height: 400px; width: 1000px">情感波动图</div>
        </td>
        <?php else: if(is_array($column_num) || $column_num instanceof \think\Collection || $column_num instanceof \think\Paginator): if( count($column_num)==0 ) : echo "" ;else: foreach($column_num as $key=>$idx): ?>
        <td>

            <?php if(is_array($pre_records) || $pre_records instanceof \think\Collection || $pre_records instanceof \think\Paginator): $i = 0; $__LIST__ = $pre_records;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$r): $mod = ($i % 2 );++$i;if($r['type_name'] == $t['type_name'] && $r['user_travel_column'] == $idx): ?>
            <div class="canvas_template_div"
     onmouseover="$('#flag_importance_btn_<?php echo htmlentities($r['id']); ?>').show()"
     onmouseout="$('#flag_importance_btn_<?php echo htmlentities($r['id']); ?>').hide()"
     style="position: relative;float: left;">
    <!--标注重要性按钮-->
    <div class="tooltip_bottom" id="flag_importance_btn_<?php echo htmlentities($r['id']); ?>" style="display: none;float: none;">
        <svg style="cursor: pointer;"
             onclick="clickImportance('<?php echo htmlentities($r['id']); ?>')"
             t="1587886859759" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5888" width="30" height="30"><path d="M512 106.5c54.8 0 107.9 10.7 157.8 31.8 48.3 20.4 91.6 49.7 128.9 86.9s66.5 80.6 86.9 128.9c21.1 50 31.8 103.1 31.8 157.8s-10.7 107.9-31.8 157.8c-20.4 48.3-49.7 91.6-86.9 128.9s-80.6 66.5-128.9 86.9c-50 21.1-103.1 31.8-157.8 31.8-54.8 0-107.9-10.7-157.8-31.8-48.3-20.4-91.6-49.7-128.9-86.9-37.3-37.3-66.5-80.6-86.9-128.9-21.1-50-31.8-103.1-31.8-157.8s10.7-107.9 31.8-157.8c20.4-48.3 49.7-91.6 86.9-128.9 37.3-37.3 80.6-66.5 128.9-86.9 49.9-21.1 103-31.8 157.8-31.8m0-42.5C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z" p-id="5889" fill="#d81e06"></path><path d="M775.1 406.4c-2.8-1.9-6-3-9.2-3.1-22.4-4.4-244.3-66.4-390.4-107.7-0.4-0.1-0.7-0.2-1.1-0.3-0.1 0-0.2 0-0.4-0.1-0.5-0.1-0.9-0.2-1.4-0.2h-0.1c-0.5-0.1-1.1-0.1-1.6-0.1h-0.1-0.1c-0.5 0-1 0-1.5 0.1h-0.3c-0.5 0.1-1 0.1-1.4 0.2-0.1 0-0.2 0-0.3 0.1-0.4 0.1-0.9 0.2-1.3 0.3-0.1 0-0.2 0.1-0.3 0.1-0.4 0.1-0.8 0.3-1.1 0.4-0.1 0-0.2 0.1-0.4 0.1l-1.2 0.6c-0.1 0.1-0.2 0.1-0.3 0.2-0.4 0.2-0.8 0.5-1.2 0.7-0.1 0-0.1 0.1-0.2 0.1-0.2 0.1-0.4 0.3-0.6 0.5-0.1 0.1-0.3 0.2-0.4 0.3l-0.2 0.2c-0.4 0.3-0.7 0.6-1 1l-0.2 0.2c-0.3 0.3-0.7 0.7-1 1.1-0.3 0.4-0.6 0.7-0.8 1.1-0.1 0.1-0.1 0.2-0.2 0.3-0.2 0.4-0.5 0.8-0.7 1.1-0.1 0.1-0.1 0.2-0.2 0.4l-0.6 1.2c-0.1 0.1-0.1 0.2-0.1 0.4-0.1 0.3-0.3 0.7-0.4 1.1 0 0.1-0.1 0.3-0.1 0.4-0.1 0.4-0.2 0.9-0.3 1.3 0 0.1-0.1 0.3-0.1 0.4-0.1 0.5-0.2 0.9-0.2 1.4v0.3c0 0.5-0.1 1-0.1 1.6V695h-35.1c-9.4 0-17 7.6-17 17s7.6 17 17 17H430c9.4 0 17-7.6 17-17s-7.6-17-17-17h-42V334.5c34.4 9.7 104.7 29.5 174.5 48.9 57.1 15.9 102.7 28.5 135.6 37.4 3 0.8 5.9 1.6 8.8 2.4l-266.7 95.2c-8.8 3.2-13.5 12.9-10.3 21.7 3.2 8.8 12.9 13.5 21.7 10.3l318.2-113.6c2-0.5 3.9-1.4 5.9-2.9 4.2-3.2 6.8-8.3 6.8-13.6-0.2-5.5-2.9-10.7-7.4-13.9z" p-id="5890" fill="#d81e06"></path></svg>
        <div class="tooltiptext_bottom" style="left: 20%;width: auto;min-width: initial;">
            认为该观点很重要？点击标注吧~
        </div>
    </div>
    <?php if($r['readonly'] == 'N'): ?>
    <textarea  maxlength="50" id="record_<?php echo htmlentities($r['id']); ?>"  style="background:<?php echo htmlentities($r['bg_color']); ?>;border:none;"
               oninput="onkeyupForTextarea('<?php echo htmlentities($r['id']); ?>')" class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>

    <?php else: ?>
    <textarea  disabled id="record_<?php echo htmlentities($r['id']); ?>"
               style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/"  class="record_area"><?php echo htmlentities($r['contents']); ?></textarea>
    <?php endif; ?>

    <div id="text_count_<?php echo htmlentities($r['id']); ?>" class="text_count" style="">
        <?php echo iconv_strlen($r['contents']); ?>/50
    </div>

    <!--重要性标注色条-->
    <div id="flag_importance_<?php echo htmlentities($r['id']); ?>" class="flag_importance_line" style="display:none;background-color: #d81e06;">

    </div>
</div>

<script>
    function clickImportance(recordId) {

        if($('#flag_importance_'+recordId).css('display') == 'none'){ // 改flag 为 true
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/Quescontroller/updateQuesFlagRecords",
                data: {
                    userId: "<?php echo htmlentities($_COOKIE['user']); ?>",
                    preparedId: recordId,
                    isFlagWanted: 'Y'
                },
                success: function (result) {
                    //console.log(result);
                    $('#flag_importance_'+recordId).show();
                }
            })

        }else{ // 改flag 为 false
            $.ajax({
                type: "POST",
                url: "http://localhost/tp5/public/index.php/index/Quescontroller/updateQuesFlagRecords",
                data: {
                    userId: "<?php echo htmlentities($_COOKIE['user']); ?>",
                    preparedId: recordId,
                    isFlagWanted: 'N'
                },
                success: function (result) {
                    //console.log(result);
                    $('#flag_importance_'+recordId).hide();
                }
            })
        }
        //
    }
</script>
            <?php endif; ?>
            <?php endforeach; endif; else: echo "" ;endif; ?>

        </td>
        <?php endforeach; endif; else: echo "" ;endif; ?>
        <?php endif; ?>

    </tr>

    <?php endforeach; endif; else: echo "" ;endif; ?>


</table>

<!-- echarts import -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.7/dist/echarts.min.js"></script>

<script>
var symbolSize = 20;
//var data = [[0, 0], [1, 0], [2, 0], [3, 0]]; // 初始显示点数据
var data = '<?php echo json_encode($emotion_curve_data); ?>'; // 初始显示点数据
data = JSON.parse(data)
console.log('data',data)

option = {
    title: {
        text: '情绪等级',
    },
    tooltip: {
        triggerOn: 'none',
        formatter: function (params) {
            return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
        }
    },
    grid: {
        left: '10%',
        top: '10%',
        right: '10%',
        bottom: '10%'
    },
    xAxis: {
        minInterval: 1,
        name: '路径阶段',
        nameTextStyle: {
            fontSize: 18
        },
        min: 0,
        max: 3,
        type: 'value',
        axisLine: {onZero: false},
        minInterval: 1
    },
    yAxis: {
        min: -3.5,
        max: 3.5,
        type: 'value',
        axisLine: {onZero: false},
        interval: 0.5,
        splitLine: {
            show: false
        },
        splitArea: {
            show: true,
            areaStyle: {
                // 两个相同颜色构成一组
                color: [
                    'rgba(0, 0, 255, 0.8)', 'rgba(0, 0, 255, 0.8)',
                    'rgba(0, 0, 255, 0.5)', 'rgba(0,0 , 255, 0.5)',
                    'rgba(0, 0, 255, 0.2)', 'rgba(0, 0, 255, 0.2)',
                    'rgba(175, 215, 237, 0.3)', 'rgba(175, 215, 237, 0.3)',
                    'rgba(255, 0, 0, 0.2)', 'rgba(255, 0, 0, 0.2)',
                    'rgba(255, 0, 0, 0.5)', 'rgba(255, 0, 0, 0.5)',
                    'rgba(255, 0, 0, 0.8)', 'rgba(255, 0, 0, 0.8)'
                ]
            }
        },
        axisLabel: {
            formatter: function(value, index){
                // 只显示整数值
                if(Math.floor(value) === value){
                    return value
                }
            }
        }
    },
    series: [
        {
            id: 'a',
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
            data: data
        }
    ]
};

var myChart = echarts.init(document.getElementById('echarts'))

setTimeout(function () {
    // 使用与显示点重合的不可见graphic circle作为操作点
    myChart.setOption({
        graphic: echarts.util.map(data, function (item, dataIndex) {
            return {
                type: 'circle',
                position: myChart.convertToPixel('grid', item),
                shape: {
                    cx: 0,
                    cy: 0,
                    r: symbolSize / 2
                },
                invisible: true,
                draggable: true,
                ondrag: echarts.util.curry(onPointDragging, dataIndex),
                ondragend: updatePosition,
                onmousemove: echarts.util.curry(showTooltip, dataIndex),
                onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                z: 100
            };
        })
    });
}, 0);

// 更新操作点位置，与显示点重合
function updatePosition() {
    myChart.setOption({
        graphic: echarts.util.map(data, function (item, dataIndex) {
            return {
                position: myChart.convertToPixel('grid', item)
            };
        })
    });


    var preId = JSON.parse('<?php echo json_encode($emotion_curve_prepared_id); ?>');
    console.log('updatePositionData',data);
    $.ajax({
        type: "POST",
        url: "http://localhost/tp5/public/index.php/index/index/updateEmotionCurve",
        data: {
            preIdArr: JSON.stringify(preId),
            userId: "<?php echo htmlentities($_COOKIE['user']); ?>",
            newContents: JSON.stringify(data)
        },
        success: function (result) {
            //console.log(result);
        }
    })

}

// 提示显示点位置
function showTooltip(dataIndex) {
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: dataIndex
    });
}

// 隐藏显示点位置提示
function hideTooltip(dataIndex) {
    myChart.dispatchAction({
        type: 'hideTip'
    });
}

// 拖动操作点时操作
function onPointDragging(dataIndex, dx, dy) {
    var y = myChart.convertFromPixel('grid', this.position)[1];
    const absMax = 3
    y = y > absMax ? absMax : y; // 限制y轴移动范围
    y = y < -absMax ? -absMax : y;
    y = y > ((Math.ceil(y) + Math.floor(y)) / 2) ? Math.ceil(y) : Math.floor(y); // 取接近整数点
    data[dataIndex][1] = y;

    // 更新显示点位置
    myChart.setOption({
        series: [{
            id: 'a',
            data: data
        }]
    });
}

// 初始化
myChart.setOption(option)

</script>

<script>



    //画布的  信息上边栏  随滚动条移动自动到达屏幕顶端
    var _box_y = $("#work_top_window").offset().top;
    $(window).scroll(function(){
        if($(window).scrollTop() > _box_y){
            $("#work_top_window").css("top",$(window).scrollTop()+"px");
            $("#work_top_window").css("z-index",101);
        }else{
            $("#work_top_window").css("top",_box_y);
        }
    });




    setTimeout(function () {
        var allText = $(".record_area");

        //console.log(allText);
        for (var i = 0; i < allText.length; i++) {
            autoTextarea(allText[i]);// 调用
        }
    }, 0);



    var crtRecordId = 0;

    // 防抖
    var debounce = (function () {
        var timeout = null;
        return function() {
            if(timeout !== null){
                clearTimeout(timeout);
            }
            timeout = setTimeout(function () {
                editRecord(window.crtRecordId);
            }, 1000);
        }
    })();

    //调用后台编辑函数；更改字数统计div；广播新内容
    function onkeyupForTextarea(recordId){
        var id = "record_" + recordId;

        this.crtRecordId = recordId;
        //不需要显示edit按钮了
        //$('#'+id).next().children('.edit_btn').show();


        // 触发防抖函数(editRecord)
        debounce();


        var newContent = $('#'+id).val().length + "/50";
        $('#text_count_' + recordId).html(newContent );


    }

    function editRecord( record_id){
        var value = $('#record_'+ record_id).val();

        $('#auto_save').text('自动保存中...');

        //insert into database

        $.ajax({
            type:"POST",
            url:"http://localhost/tp5/public/index.php/index/index/editQuesRecord",
            data: {
                preId: record_id,
                newRecord: value,
                userId:"<?php echo htmlentities($_COOKIE['user']); ?>"
            },
            success:function (result) {
                setTimeout(function () {
                    $('#auto_save').text('√自动保存成功');
                }, 1000);



            }
        })
    }


    /**
     * 文本框根据输入内容自适应高度
     * @param                {HTMLElement}        输入框元素
     * @param                {Number}                设置光标与输入框保持的距离(默认0)
     * @param                {Number}                设置最大高度(可选)
     */
    var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
            isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
            addEvent = function (type, callback) {
                elem.addEventListener ?
                    elem.addEventListener(type, callback, false) :
                    elem.attachEvent('on' + type, callback);
            },
            getStyle = elem.currentStyle ? function (name) {
                var val = elem.currentStyle[name];

                if (name === 'height' && val.search(/px/i) !== 1) {
                    var rect = elem.getBoundingClientRect();
                    return rect.bottom - rect.top -
                        parseFloat(getStyle('paddingTop')) -
                        parseFloat(getStyle('paddingBottom')) + 'px';
                };

                return val;
            } : function (name) {
                return getComputedStyle(elem, null)[name];
            },
            minHeight = parseFloat(getStyle('height'));

        elem.style.resize = 'none';

        var change = function () {
            var scrollTop, height,
                padding = 0,
                style = elem.style;

            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            //scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                //scrollTop += parseInt(style.height) - elem.currHeight;
                //document.body.scrollTop = scrollTop;
                //document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };

        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };

</script>

<style>
    .ques_table{
        border: 1px black solid;min-height:200px;margin-left: 220px;margin-top: 10px;clear: both;
        border-collapse: collapse;
    }

    .ques_table tr{
        border-bottom: 1px black solid;
    }

    .ques_table tr:last-child{
        border: none;
    }
    .ques_table td{
        border-right: 1px black solid;
        text-align: center;
        vertical-align: top;
        width: 200px;
    }

    .ques_table td:first-child{
        vertical-align: middle;
    }

    .ques_table td:last-child{
        border:none;
    }

    .record_area{
        margin: 10px;
        border:none;
        width: 200px;
        height: 70px;
    }

    .readOnly{
        cursor:not-allowed;
        background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);

    }

    .text_count{
        right: 10px;
        bottom: 8%;
        left: initial;
    }

    .canvas_template_div{
        margin: 0 15px;
    }

    .flag_importance_line{
        height: 90px;
    }
</style> <head>
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/float_window.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/tools.css" />
    <link href="http://localhost/tp5/public/CSS/toastr.css" rel="stylesheet" />
    <script src="http://localhost/tp5/public/JS/toastr.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost/tp5/public/CSS/bootcssButtons.css" />


    <script>
        function sendFeedback(userId) {
            var feedbackInfo = $('#feedbackInfo').val();
            var re = new RegExp("^[ ]+$");

            if (!re.test(feedbackInfo) && feedbackInfo != "" && feedbackInfo != null) {

                $.post("http://localhost/tp5/public/index.php/index/index/addFeedback", {
                    feedbackInfo: $('#feedbackInfo').val(),
                    userId: userId
                }, function() {
                    //显示一个信息没有标题
                    toastr.success('反馈已成功发送，感谢使用~');
                    setTimeout(function() {
                        toastr.clear();
                    }, 2000);
                });
            } else {
                toastr.error('反馈不能为空~');
                setTimeout(function() {
                    toastr.clear();
                }, 2000);
            }
        }

        function showFeedback() {
            $('#showdiv_F').show(); //显示弹窗
            $('#cover_F').css('display', 'block'); //显示遮罩层
            $('#cover_F').css('height', '100%'); //设置遮罩层的高度为当前页面高度
        }

        // 关闭弹窗
        function closeFeedback() {
            $('#showdiv_F').hide(); //隐藏弹窗
            $('#cover_F').css('display', 'none'); //隐藏遮罩层
        }
    </script>
</head>

<body>

    <!--<div style="height:1000px;"></div>-->

    <div class="guide">
        <div class="guide-wrap">
            <!--<a href="#" class="edit" title="发新帖"><span>发新帖</span></a>
        <a href="#" class="find" title="找论坛"><span>找论坛</span></a>-->
            <?php if(isset($_COOKIE['user'])): ?>
            <a href="javascript:showFeedback()" class="report" title="反馈"><span>反馈</span></a> <?php endif; ?>
            <a href="javascript:window.scrollTo(0,0)" class="top" title="回顶部"><span>回顶部</span></a>
        </div>
    </div>



    <?php if(isset($_COOKIE['user'])): ?>

    <!--以下为添加反馈时的弹窗相关-->
    <!-- 遮罩层 -->
    <div id="cover_F" class="cover"></div>
    <!-- 弹窗 -->
    <div id="showdiv_F" class="showdiv" style="height: 250px;">
        <!-- 标题 -->
        <div class="showdiv_title">
            意见和反馈
        </div>
        <!-- 内容 -->
        <div class="showdiv_prompt">
            请留下您的宝贵意见或反馈：

            <div>
                <textarea required id="feedbackInfo" style="height: 100px;width: 400px;margin-top: 20px;"></textarea>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="button button-medium " onclick="closeFeedback()" style="position: absolute;left: 25%;top: 80%;">
            取消</div>
        <div id="next_step_btn" onclick="sendFeedback('<?php echo htmlentities($_COOKIE['user']); ?>')" class="button button-action button-medium" style="position:absolute;left: 50%;top: 80%;">
            发送</div>

    </div>

    <?php endif; ?>

</body>

    </div>
    <div class="footer">
        <style>
    a {
        text-decoration: none;
        color: #aaabab;
        text-decoration: none;
    }
    
    a:hover {
        color: #647BFF;
        text-decoration: none;
    }
</style>

<div style="font-size:18px;background-color: #f9f9f9;color:#aaabab;width:100%;/*padding: 20px 0;*/text-align: center;">
    Copyright © <a href="http://localhost/tp5/public/index.php">火花设计思维分享</a> 京ICP备19028873号-1
</div>
    </div>
</div>



<script>
    // 此处应修改，不能直接操作innerHTML，不然echarts绘图空白
    // var s = document.body.innerHTML;
    // s = s.replace(/商业/g, '产业');
    // document.body.innerHTML = s;
</script>


<style>
    * {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    .my_container {
        min-height: 600px;
        padding-bottom: -25px;
        min-width: 925px;
    }
    
    .my_container::after {
        content: "";
        clear: both;
        display: block;
    }
    
    .footer {
        height: 25px;
        min-width: 925px;
    }
    
    button {
        margin-left: 10px;
        border-radius: 20px;
        padding: 12px 23px;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        font-size: 14px;
        font-family: inherit;
        -webkit-writing-mode: horizontal-tb;
        text-rendering: auto;
    }
    
    button:hover {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
    }
</style>